<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-09 09:15:45
 * @LastEditors: charles
 * @LastEditTime: 2022-01-04 07:06:14
-->
<template>
  <div class="device" v-loading="loading">
    <div class="btns">
      <el-row>
        <el-col :span="18">
          <el-form inline :model="params">
            <el-form-item>
              <el-select v-model="params.online_status" clearable placeholder="请选择设备在线状态">
                <el-option label="离线" :value="0"></el-option>
                <el-option label="在线" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="params.bind_status" clearable placeholder="请选择设备绑定状态">
                <el-option label="未绑定" :value="0"></el-option>
                <el-option label="已绑定" :value="1"></el-option>
              </el-select>
            </el-form-item>
              <el-form-item>
              <el-input v-model="params.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="loadDevice">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button type="primary" @click="toAdd">录入</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="deviceData.list">
      <el-table-column type="index" :index="1" label="编号" fixed="left"></el-table-column>
      <el-table-column label="编号" prop="serial_number" width="100" align="center" fixed="left"></el-table-column>
      <el-table-column label="名称" prop="name" min-width="300"></el-table-column>
      <el-table-column label="在线状态" prop="begin_time" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.online_status === 1?'success':'danger'">
            {{scope.row.online_status === 1?'在线':'离线'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="绑定状态" prop="begin_time" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.bind_status === 1?'success':'danger'">
            {{scope.row.online_status === 1?'已绑定':'未绑定'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template slot-scope="scope">
         <el-button type="text" @click="toEdit(scope.row)">修改</el-button>
         <el-button :disabled="scope.row.status === '监测中'" type="text" @click="toDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      small
      hide-on-single-page
      :total="deviceData.total"
      :page-size="+deviceData.pageSize"
      :current-page="+deviceData.page"
      @current-change="currentChangeHandler"
    />
    <!-- 分页 -->
    <!-- 抽屉 -->
    <Briupdrawer :drawer-visible="visible" :title="title" width="50%" @on-change-visible="handlerVisibleChange" >
      <div slot="content">
        <el-form :model="form" ref="deviceForm" :rules="rules" label-width="80px" size="mini">
          <el-form-item label="编号" prop="serial_number">
            <el-input v-model="form.serial_number"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler">确定</el-button>
      </span>
    </Briupdrawer>
    <!-- 抽屉结束 -->
  </div>
</template>
<script>
import {del, get, postJSON } from '@/utils/request'
import pca from '@/assets/pca.json'
import _ from 'lodash'
export default {
  data(){
    return {
      loading:false,
      pca,
      visible:false,
      title:'',
      form:{},
      rules:{
        serial_number: [ { required: true, message: '请输入编号', trigger: 'blur' } ],
        name: [ { required: true, message: '请输入名称', trigger: 'blur' } ],
      },
      params:{
        page:1,
        pageSize:10,
      },
      form:{},
      deviceData:{
        list:[]
      },
      users:[]
    }
  },
  mounted(){
    this.loadDevice();
    this.loadUser();
  },
  methods:{
    submitHandler(){
       this.$refs.deviceForm.validate((valid) => {
        if (valid) {
          // 处理form
          let data = _.clone(this.form);
          let url = "/device/saveOrUpdate"
          postJSON(url,data).then(resp => {
            this.$message({message:resp.message,type:'success'})
            this.visible = false;
            this.form = {}
            this.loadDevice();
          })
        } else {
          return false;
        }
      });
    },
    toAdd(){
      this.form = {};
      this.title = "录入设备信息"
      this.visible = true;
    },
    toEdit(row){
      let form = _.clone(row)
      this.form = form;
      this.title = "修改设备信息"
      this.visible = true;
    },
    // 删除
    toDel(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/device/deleteById'
        del(url,{id:row.id}).then(response =>{
          this.$message({ type: 'success', message: '删除成功!' });
          this.loadDevice()
        })
      })
    },
    // 查询设备
    loadDevice(){
      this.loading = true;
      let url = "/device/pageQuery"
      get(url,this.params).then(resp=>{
        this.deviceData = resp.data;
      }).finally(()=>{
        this.loading = false;
      })
    },
    // 查询区域经理
    loadUser(){
      let url = "/user/pageQuery"
      let params = {
        page:1,
        pageSize:10
      }
      get(url,params).then(resp => {
        this.users = resp.data.list;
      })
    },
     // 当前页发生改变
    currentChangeHandler(page) {
      this.params.page = page
      this.loadDevice();
    },
     // 重置表单校验
    clearValidate() {
      this.$refs.deviceForm.clearValidate();
    },
    // 处理visible变化的钩子函数，解决抽屉无法收缩的bug
    handlerVisibleChange(val) {
      this.visible = val
    }
  }
}
</script>